<template>
	<div style="overflow-y: auto;">

		<template v-for="(fieldItem,formIndex) in formData ">
			<el-divider content-position="left">{{fieldItem.title}}</el-divider>
			<el-row>
				<!--表单-->
				<div class="app-container" v-if="fieldItem.type == 'form'" :key="fieldItem.idField">
					<el-form :inline="true" class="demo-form-inline">
						<div v-for="formItem in fieldItem.data" :key="formItem.id" style="float: left;">
							<el-form-item v-if="formItem.type == 'input'" :label="formItem.label">
								<el-input :readonly="formItem.readonly" v-model="fieldItem.loadData[formItem.name]"></el-input>
							</el-form-item>
							<el-form-item v-if="formItem.type == 'combox'" :label="formItem.label">
								<el-select :readonly="formItem.readonly" :multiple="formItem.multiple" v-model="fieldItem.loadData[formItem.name]"
								 :placeholder="formItem.label">
									<el-option v-for="selectItem in formItem.data" :key="selectItem[formItem.dataKey]" :label="selectItem[formItem.dataValue]"
									 :value="selectItem[formItem.dataValue]">
									</el-option>
								</el-select>
							</el-form-item>
						</div>
					</el-form>
				</div>
				<!--流程变量-->
				<div class="app-container" v-if="fieldItem.type == 'processVariables'">
					<el-form :inline="true" class="demo-form-inline">
						<div v-for="formItem in fieldItem.data" :key="formItem.id" style="float: left;">
							<el-form-item v-if="formItem.type == 'input'" :label="formItem.label">
								<el-input v-model="auditInfo[formItem.name]"></el-input>
							</el-form-item>
							<el-form-item v-if="formItem.type == 'combox'" :label="formItem.label">
								<el-select  :multiple="formItem.multiple" v-model="auditInfo[formItem.name]"
								 :placeholder="formItem.label">
									<el-option v-for="selectItem in formItem.data" :key="selectItem[formItem.dataKey]" :label="selectItem[formItem.dataValue]"
									 :value="selectItem[formItem.dataValue]">
									</el-option>
								</el-select>
							</el-form-item>
						</div>
						<el-form-item style="width: 100%;" :label="$t('flowable.auditTitle')">
							<el-input style="width: 25.25rem;height: 2.8125rem;" type="textarea" v-model="auditInfo.auditAdvice"></el-input>
						</el-form-item>
					</el-form>
				</div>
				<!--数据表格-->
				<div v-if="fieldItem.type == 'table'">
					<el-row>
						<el-button v-if="fieldItem.addAble" icon="el-icon-plus" type="primary" size="mini" @click="tableAdd(formIndex,fieldItem)">{{$t('common.addBtn')}}</el-button>
					</el-row>
					<el-row>
						<el-table max-height="400" v-loading="fieldItem.listLoading" :data="fieldItem.loadData" border fit
						 highlight-current-row style="width: 100%">
							<el-table-column v-for="item in fieldItem.columns" :key="item.field" align="center" :label="item.title" :width="item.width">
								<template slot-scope="{row}">
									<template v-if="item.type == 'combox'">
										<span>{{ fieldItem["translation"][item.field][row[item.field]] }}</span>
									</template>
									<template v-if="item.type != 'combox'">
										<span>{{ row[item.field] }}</span>
									</template>
								</template>
							</el-table-column>
							<el-table-column v-if="fieldItem.operationAble" label="操作" width="200px">
								<template slot-scope="scope">
									<el-button v-if="fieldItem.editAble" icon="el-icon-edit" type="primary" size="mini" @click="tableEdit(scope.$index, formIndex,fieldItem,scope.row)">编辑</el-button>
									<el-button v-if="fieldItem.deleteAble" icon="el-icon-delete" size="mini" type="danger" @click="tableDelete(scope.$index, formIndex,fieldItem,scope.row)">删除</el-button>
								</template>
							</el-table-column>
						</el-table>
						<el-pagination v-if="fieldItem.showPage" @size-change="pageSizeChange(formIndex,fieldItem.page,$event)"
						 @current-change="currentPageChange(fieldItem.page,$event)" :current-page="fieldItem.page.currentPage"
						 :page-sizes="fieldItem.page.pageSizes" :page-size="fieldItem.page.pageSize" layout="total, sizes, prev, pager, next, jumper"
						 :total="fieldItem.page.total" background>
						</el-pagination>
					</el-row>
				</div>
			</el-row>
		</template>
		<!-- 编辑模态框 -->
		<el-dialog width="40%" :title="editTable.title" :visible.sync="editTable.visible" center append-to-body>
			<el-row>
				<el-form :inline="true" class="tableEditForm demo-form-inline" label-position="right" label-width="80px">
					<el-form-item v-for="formItem in editTable.columns" :key="formItem.field" :label="formItem.title">
						<el-input v-if="formItem.type != 'combox'" v-model="editTable.data[formItem.field]"></el-input>

						<el-select v-if="formItem.type == 'combox'" :multiple="formItem.multiple" v-model="editTable.data[formItem.field]"
						 :placeholder="formItem.title" style="width: 92%;">
							<el-option v-for="selectItem in formItem.comboxData" :key="selectItem[formItem.comboxKey]" :label="selectItem[formItem.comboxValue]"
							 :value="selectItem[formItem.comboxKey]">
							</el-option>
						</el-select>
					</el-form-item>
				</el-form>
			</el-row>
			<span slot="footer" class="dialog-footer">
				<el-button type="danger" icon="el-icon-close" @click="editTable.visible = false">取 消</el-button>
				<el-button icon="el-icon-check" type="primary" @click="tableFormSave">保 存</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	import request from '@/utils/request'
	export default {
		name: 'flowFromEdit',
		props: ['formKey', "taskInfo","auditInfo"],
		data() {
			return {
				activeName: "first",
				formData: [],
				//所有的下拉选项
				options: {

				},
				//编辑表格
				editTable: {
					title: "编辑表格",
					visible: false,
					columns: [],
					data: {},
					translation: {},
					tableIndex: {},
					tableInfo: {}
				},
				//审批相关信息
				auditInfo() {

				}
			}
		},
		watch: {
			formKey: function(val) {
				debugger
				var a = val
			},
			taskInfo: function(val) {
				debugger

			}
		},
		//页面初始化加载
		created() {
			this.getFormData();
		},
		methods: {
			//获取表单信息
			getFormData() {
				var queryParams = {
					ffKey: this.formKey
				}
				request({
					url: '/flowable/flowFrom/query',
					method: 'post',
					data: queryParams
				}).then(response => {
					if (response.data.length > 0) {
						this.formData = JSON.parse(response.data[0].ffData);
						this.initComboxData();
					}
				})
			},
			//初始化数据
			initData() {
				var _this = this;
				for (var i = 0; i < this.formData.length; i++) {
					if (this.formData[i]["queryParams"]) {
						this.formData[i]["queryParams"]["index"] = i;
					} else {
						this.formData[i]["queryParams"] = {
							index: i
						}
					}
					if (this.formData[i]["queryUrl"]) {
						if (!this.formData[i].businessField) {
							this.formData[i]["queryParams"][this.formData[i].businessField] = this.taskInfo.bussinessKey
						}
						if (!this.formData[i].flowField) {
							this.formData[i]["queryParams"][this.formData[i].flowField] = this.taskInfo.pocessInstanceId
						}
						request({
							url: this.formData[i]["queryUrl"],
							method: 'post',
							data: this.formData[i]["queryParams"]
						}).then(response => {
							var curIndex = _this.getParams(response.params, "index");
							if (_this.formData[curIndex].showPage) {
								_this.formData[curIndex]["loadData"] = response.data.list;
								_this.formData[curIndex]["page"]["total"] = response.data.total;
								_this.formData[curIndex]["page"]["currentPage"] = response.data.pageNum;
							} else {
								_this.formData[curIndex]["loadData"] = response.data;
							}

						})
					}
				}
			},
			//获取参数
			getParams(data, name) {
				var dataArr = data.split("&");
				for (var i = 0; i < dataArr.length; i++) {
					var cur = dataArr[i].split("=");
					if (cur[0] == name) {
						return cur[1];
					}
				}
			},
			initPageInfo(index) {
				if (!this.formData[index].page) {
					this.formData[index].page = {
						pageSizes: [10, 20, 50, 100],
						pageSize: 10,
						total: 0,
						currentPage: 1
					}
				}
			},
			//初始化下拉框输数据
			initComboxData() {
				var _this = this;
				for (var i = 0; i < this.formData.length; i++) {
					if (this.formData[i]["type"] == "form" || this.formData[i]["type"] == "processVariables") {
						for (var dataIndex = 0; dataIndex < this.formData[i].data.length; dataIndex++) {
							if (this.formData[i].data[dataIndex]["type"] == "combox") {
								var comboxParams = this.formData[i].data[dataIndex]["queryParams"];
								if (!comboxParams) {
									comboxParams = {};
								}
								comboxParams["index"] = i;
								comboxParams["dataIndex"] = dataIndex;
								request({
									url: this.formData[i]["data"][dataIndex]["queryUrl"],
									method: 'post',
									data: comboxParams
								}).then(response => {
									var curIndex = _this.getParams(response.params, "index");
									var dataIndex = _this.getParams(response.params, "dataIndex");
									if (!_this.formData[curIndex]["data"][dataIndex]["data"]) {
										_this.formData[curIndex]["data"][dataIndex]["data"] = []
									}
									_this.formData[curIndex]["data"][dataIndex]["data"] = response.data;
								})
							}
						}
					}
					if (this.formData[i]["type"] == "table") {
						this.initPageInfo(i);
						for (var j = 0; j < this.formData[i]["columns"].length; j++) {
							if (this.formData[i]["columns"][j]["type"] == "combox") {
								var comboxParams = this.formData[i]["columns"][j]["comboxParams"];
								if (comboxParams) {
									comboxParams["index"] = i;
									comboxParams["columnIndex"] = j;
								} else {
									comboxParams = {
										index: i,
										columnIndex: j
									}
								}
								request({
									url: this.formData[i]["columns"][j]["comboxUrl"],
									method: 'post',
									data: comboxParams
								}).then(response => {
									debugger
									var curIndex = _this.getParams(response.params, "index");
									var curColumnIndex = _this.getParams(response.params, "columnIndex");
									var curCombox = _this.formData[curIndex]["columns"][curColumnIndex];
									_this.formData[curIndex]["columns"][curColumnIndex]["comboxData"] = response.data;
									if (!_this.formData[curIndex]["translation"]) {
										_this.formData[curIndex]["translation"] = {};
									}
									if (!_this.formData[curIndex]["translation"][curCombox["field"]]) {
										_this.formData[curIndex]["translation"][curCombox["field"]] = {};
									}
									for (var k = 0; k < response.data.length; k++) {
										_this.formData[curIndex]["translation"][curCombox["field"]][response.data[k][curCombox["comboxKey"]]] =
											response.data[k][curCombox["comboxValue"]];
									}
								})
							}
						}
					}
				}
				//延时执行
				setTimeout(() => {
					this.initData();
				}, 200);
			},
			//页码改变
			pageSizeChange(formIndex, page, pageSize) {
				var _this = this;
				var params = this.formData[formIndex]["queryParams"];
				params["index"] = formIndex;
				params["pageNo"] = page["currentPage"];
				params["pageSize"] = pageSize;
				request({
					url: this.formData[formIndex]["queryUrl"],
					method: 'post',
					data: params
				}).then(response => {
					var curIndex = _this.getParams(response.params, "index");
					if (_this.formData[curIndex].showPage) {
						_this.formData[curIndex]["loadData"] = response.data.list;
						_this.formData[curIndex]["page"]["total"] = response.data.total;
						_this.formData[curIndex]["page"]["currentPage"] = response.data.pageNum;
					} else {
						_this.formData[curIndex]["loadData"] = response.data;
					}
				})

			},
			//当前页面改变
			currentPageChange() {

			},
			//提交触发的方法
			saveFromInfo() {
				debugger
				for (var i = 0; i < this.formData.length; i++) {
					if (this.formData[i].type == "form" && this.formData[i].saveUrl) {
						if (!this.formData[i].businessField) {
							this.formData[i].loadData[this.formData[i].businessField] = this.taskInfo.bussinessKey
						}
						if (!this.formData[i].flowField) {
							this.formData[i].loadData[this.formData[i].flowField] = this.taskInfo.pocessInstanceId
						}
						var url = this.formData[i].saveUrl;
						if (this.formData[i].loadData["idField"]) {
							url = this.formData[i].updateUrl;
						}
						this.saveForm(url, this.formData[i].loadData);
					}
				}
			},
			//表单保存事件
			saveForm(url, data) {
				request({
					url: url,
					method: 'post',
					data: data
				}).then(response => {

				})
			},
			//表单增加行
			tableAdd(formIndex, formItem) {
				debugger
				this.editTable.translation = formItem.translation;
				this.editTable.columns = formItem.columns;
				this.editTable.visible = true;
				this.editTable.tableIndex = formIndex;
				this.editTable.tableInfo = formItem;
			},
			//编辑表单
			tableEdit(index, formIndex, formItem, row) {
				debugger
				this.editTable.translation = formItem.translation;
				this.editTable.columns = formItem.columns;
				this.editTable.visible = true;
				this.editTable.tableIndex = formIndex;
				this.editTable.tableInfo = formItem;
				this.editTable.data = row;
			},
			//删除表单
			tableDelete(index, formIndex, formItem, row) {
				this.$confirm('是否删除?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					request({
						url: formItem["deleteUrl"],
						method: 'post',
						data: row
					}).then(response => {
						this.pageSizeChange(formIndex, formItem["page"], formItem["page"]["pageSize"]);
					})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},
			//保存事件
			tableFormSave() {
				var idField = this.editTable.tableInfo["idField"];
				var url = this.editTable.tableInfo["saveUrl"];
				if (this.editTable.data[idField]) {
					url = this.editTable.tableInfo["updateUrl"];
				}
				request({
					url: url,
					method: 'post',
					data: this.editTable.data
				}).then(response => {
					this.editTable.visible = false;
					this.pageSizeChange(this.editTable.tableIndex, this.editTable.tableInfo["page"], this.editTable.tableInfo["page"]
						["pageSize"])
				})
			}
		}
	}
</script>

<style>
	.tableEditForm .el-form-item {
		width: 45%;
	}

	.tableEditForm .el-input {
		width: 100%;
	}
</style>
